<template>
  <el-upload
    class="editor-slide-upload"
    :headers="headers"
    :action="action"
    :multiple="true"
    :show-file-list="true"
    :on-error="handError"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :before-upload="beforeUpload"
    :limit="limit"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :disabled="disabled"
    list-type="picture-card"
  >
    <el-button v-if="!disabled" class="btn_button" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
// eslint-disable-next-line
/* eslint-disable */
import { getToken } from "@/utils/auth";
import * as UploadAPI from "@/api/upload";
export default {
  name: "ImageUpload",
  props: {
    limit: {
      type: Number
    },
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    },
    disabled: {
      type: Boolean
    }
  },
  computed: {
    url() {
      return this.$store.state.pageCommon.urlStatus
    }
  },
  data() {
    return {
      action: "",
      headers: {
        "X-Auth-Token": ""
      }
    };
  },
  created() {
    if (!this.limit) {
      this.limit = 1;
    }
    this.handleImg();
    this.action = UploadAPI.getUploadUrl();
    this.headers["X-Auth-Token"] = getToken();
    console.log('handleImg()-disabled', this.disabled, 'fileList', this.$props.fileList, '', this.action )
  },
  methods: {
    handleImg() {
      this.fileList.forEach(file => {
        file.url = this.url + file.name
      });
    },
    handleExceed(files, fileList) {
      this.$notify({
        title: "失败",
        message: `当前限制选择 ${this.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`,
        type: "warning",
        duration: 3000
      });
    },
    beforeRemove(file, fileList) {
      // 提示信息
    },
    handleRemove() {
      this.fileList.pop()
      console.log('执行移除图片handleRemove()')
      this.$emit("getfileName", "");
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$notify({
          title: "失败",
          message: "只能是 JPG、PNG 格式!",
          type: "warning",
          duration: 3000
        });
      }
      if (!isLt2M) {
        this.$notify({
          title: "失败",
          message: "上传头像图片大小不能超过 2MB!",
          type: "warning",
          duration: 3000
        });
      }
      return isJPG && isLt2M;
    },

    handleSuccess(r, file, fileList) {
      console.log(r,file,fileList)
      file.name = r.data.name
      this.$emit('getfileName', r.data.name)
    },
    handError(r, file, fileList) {
      console.log(r.file, fileList);
    }
  },
  watch: {
    fileList: {
      deep: true,
      handler(val) {
        if (val) {
          this.fileList = val;
        }
      }
    }
  }
};
</script>

<style>
.editor-slide-upload {
  margin-top: 10px;
  margin-bottom: -5px;
}
.el-upload--picture-card {
  width: 70px;
  height: 70px;
  background-color: transparent;
  border: 0px dashed transparent;
}
.btn_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
}
</style>

